<template>
	<view>
		<!-- 提示 start -->
		<view class="tip">
			<view class="tip-title">{{shopType}}适合什么场景使用</view>
			<view class="tip-btn" @click="showpre">
				查看介绍
			</view>
		</view>
		<!-- 提示 end -->
		<view class="timu">
			<view class="xuhao">1</view>
			<view class="title">
				按场景脚本上传影视素材
			</view>
		</view>
		<view class="red-tip">
			系统将对不同场景的素材，按照爆款逻辑自动搭配文案和音乐，并批量合成爆款视频
		</view>

		<view class="RadioNum">
			<radio-group @change="handleRadioChange">
				<label class="radio">
					<radio value="r1" :checked="selectedValue === 'r1'" />一镜成片
				</label>
				<label class="radio">
					<radio value="r2" :checked="selectedValue === 'r2'" />三镜成片
				</label>
			</radio-group>
		</view>

		<view class="sing-box">
			<view class="left">拍摄脚本</view>
			<view class="right" @click="navJiaobenku">
				<text>{{jiaoben.length == 0 ? '选择拍摄脚本':'已选择'}}</text>
				<text class="jiantou">></text>
			</view>
		</view>

		<!-- 视频素材 start -->
		<view class="sucai" v-if="selectedValue === 'r1'">
			<view class="header">
				视频素材：随机上传不分顺序
			</view>
			<view class="beizhu">
				备注：上传<text style="color: red;">1~60</text>秒的视频，自动剪辑配乐配文案，口播请选择口播模式</text>
			</view>
			<view class="shuoming">
				说明：若本视频工程创建后用于矩阵发布，请上传尽可能多的镜头素材(视频)，避免大量发布时被判重</text>
			</view>
			<view style="display: flex;flex-wrap: wrap;">

				<view style="display: flex;">
					<block>
						<view style="position: relative;margin-right: 20rpx;" v-for="(item,index) in form.videoList"
							:key="index">
							<video :src="item.mediaURL" style="height: 150rpx;width: 150rpx;"></video>
							<view class="close" @click="deleteVideo(index)">
								x
							</view>
						</view>
					</block>

				</view>
				<view class="video-upload">
					<image src="../../static/images/xiangji.png" style="height: 70rpx;width: 70rpx;"
						@click="sendVideo()"></image>
				</view>
			</view>
		</view>
		<!-- 视频素材 end -->

		<!-- 统一素材时长 start -->
		<view class="sucaishichang" v-if="selectedValue === 'r2'">
			<view class="item">
				<view class="left">
					<text>统一时长</text>
				</view>
				<view>
					<switch style="transform:scale(0.7)" @change="onSwitchChange"></switch>
				</view>
			</view>
			<view class="item" v-if="checkyi">
				<view class="left">
					<view class="question">?</view>
					<text>素材时长</text>
				</view>
				<view class="right">
					<!-- <text style="color: #333;">3</text> -->
					<picker @change="miaoPickerChange" :value="miaoIndex" :range="miaoList">
						<text>每个镜头裁剪到时长</text>
						<text style="color: #333;">{{miaoList[miaoIndex]}}秒</text>
					</picker>
					<text class="right-icon">></text>
				</view>
			</view>
		</view>

		<view class="sucaishichang" v-if="selectedValue === 'r2'">
			<view v-if="jiaoben.length == 0" style="padding: 20rpx; font-size: 30rpx;font-weight: bold; color: red;">
				请选择拍摄脚本</view>
			<block v-for="(item,index) in jiaoben" :key="index" v-else>
				<view class="item" @click="navJbscShangchuan(item,index)">
					<view class="left">
						<text class="xing">*</text>
						<text>场景{{index+1}}</text>
					</view>
					<view class="right">
						<text
							class="right-tip">{{form.videoList.filter(video => video.id == index + 1).length != 0 ? '已经上传'+form.videoList.filter(video => video.id == index +1).length+'视频' : '去上传'}}</text>
						<text class="right-icon">></text>
					</view>
				</view>
			</block>
		</view>
		<!-- 统一素材时长 end -->

		<!-- 定制爆款文案 start -->
		<view class="timu">
			<view class="xuhao">2</view>
			<view class="title">
				定制爆款文案
			</view>
		</view>
		<view class="red-tip">
			自定义同城流量关键词，智能匹配属于自己行业的爆款短视频文案
		</view>
		<view class="sing-box" @click="navGuanjianci">
			<view class="left">模板关键词</view>
			<view class="right">
				<text style="color:#666">{{form.content == ''?'去设置':'已完成设置'}}</text>
				<text class="jiantou" style="color: #666;">></text>
			</view>
		</view>
		<!-- 定制爆款文案 end -->


		<!-- 定制爆款文案 start -->
		<view class="timu">
			<view class="xuhao">3</view>
			<view class="title">
				文案设置
			</view>
		</view>
		<view class="red-tip">
			使用口播字幕模式时，请确保上传的视频素材中已包含通过口播形式的录音，并且发音要清晰，可以被正常识别出字幕。
		</view>
		<view class="wenan">
			<view class="header">
				<view class="header-item" :class="{'wenan-type-active':wenanNav==1}"
					style="font-weight: bold;background: #fff;height: 80rpx;line-height: 80rpx;">
					顶部文案
				</view>
			</view>
			<view class="content">
				<view class="item" @click="navDingbuwenan">
					<view class="left">
						视频顶部文案
					</view>
					<view class="right">
						<text>{{shopTrade}}</text>
						<text>></text>
					</view>
				</view>
				<view class="item" @click="openVideoFontColor">
					<view class="left">
						视频字体颜色
					</view>
					<view class="right">
						<text>智能匹配</text>
						<text>></text>
					</view>
				</view>

				<view class="item">
					<view class="left">
						口播字幕
					</view>
					<view class="right">
						<switch style="transform:scale(0.7)" @change="onkoubu"></switch>
					</view>
				</view>


				<view class="ziti">
					<text style="font-weight: bold;font-size: 32rpx;">字体大小设置{{form.fontSize}}</text>
					<view class="yulan">
						<text :style="{'font-size':form.fontSize+'px'}">预览字体</text>
					</view>

					<view class="slider-box">
						<slider active-color="#d4237a" min="10" max="50" :value="form.fontSize" block-size="12"
							@changing="fontSizeChange"></slider>
						<view class="slider-footer">
							<view class="xiao">
								小
							</view>
							<view class="huifu" @click="huifuFontSize">
								恢复默认
							</view>
							<view class="da">
								大
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 定制爆款文案 end -->


		<!-- 音乐设置 start -->
		<view class="timu" style="margin-top: 40rpx;">
			<view class="xuhao">4</view>
			<view class="title">
				音乐设置
			</view>
		</view>

		<view class="wenan">

			<view class="content">
				<view class="item" @click="navMusicSucai">
					<view class="left">
						音乐素材设置
					</view>
					<view class="right">
						<text>{{form.audioList.length != 0 ? '已选择':'未选择' }}</text>
						<text>></text>
					</view>
				</view>
				<view class="item" @click="localhostMusic">
					<view class="left">
						音乐个性化
					</view>
					<view class="right">
						<text>去设置</text>
						<text>></text>
					</view>
				</view>

				<view class="ziti">
					<text style="font-weight: bold;font-size: 32rpx;">音量设置{{form.yinLiang}}</text>

					<view class="slider-box">
						<slider active-color="#d4237a" min="0" max="100" :value="form.yinLiang" block-size="16"
							@changing="yinliangChange"></slider>
						<view class="slider-footer">
							<view class="xiao">
								小
							</view>
							<view class="huifu" @click="huifuYinliang">
								恢复默认
							</view>
							<view class="da">
								大
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 音乐设置 end -->
		<!-- 音乐设置 start -->
		<view class="timu" style="margin-top: 40rpx;">
			<view class="xuhao">5</view>
			<view class="title">
				口播设置 <switch style="transform:scale(0.7)" :checked="isChoosePeiyin" @change="choosePeiyin"></switch>
			</view>
		</view>
		<view style="width: 100%;background: #fff;" v-if="isChoosePeiyin">
			<view style="height: 100rpx;display: flex;justify-content: space-between;line-height: 100rpx;" @click="navPeiyinyuan">
				<view style="font-size: 32rpx;font-weight: bold;margin-left: 30rpx;">
					配音员
				</view>
				<view style="display: flex;align-items: center;color: #666;font-size: 30rpx;">
					<text>{{peiyinyuanForm.username?peiyinyuanForm.username:'选择配音员'}}</text>
					<text style="font-size: 30rpx;color: #666;margin-right: 30rpx;">></text>
				</view>
			</view>
		</view>
		
		<view style="width: 100%;background: #fff;" v-if="isChoosePeiyin">
			<view style="height: 100rpx;display: flex;justify-content: space-between;line-height: 100rpx;" @click="navCloneList">
				<view style="font-size: 32rpx;font-weight: bold;margin-left: 30rpx;">
					克隆源选择
				</view>
				<view style="display: flex;align-items: center;color: #666;font-size: 30rpx;">
					<text>{{peiyinyuanForm.username?peiyinyuanForm.username:'选择克隆源'}}</text>
					<text style="font-size: 30rpx;color: #666;margin-right: 30rpx;">></text>
				</view>
			</view>
		</view>
		<view style="width: 100%;background: #fff;" v-if="isChoosePeiyin">
			<view style="height: 100rpx;display: flex;justify-content: space-between;line-height: 100rpx;" @click="navClone">
				<view style="font-size: 32rpx;font-weight: bold;margin-left: 30rpx;">
					前往克隆
				</view>
				<view style="display: flex;align-items: center;color: #666;font-size: 30rpx;">
					<!-- <text>></text> -->
					<text style="font-size: 30rpx;color: #666;margin-right: 30rpx;">></text>
				</view>
			</view>
		</view>
		
		<view style="height: 30rpx;width:100%;background: #fff;"></view>
		
		
		<view class="timu" style="margin-top: 40rpx;">
			<view class="xuhao">6</view>
			<view class="title">
				视频分辨率:
			</view>
		</view>

		<view class="RadioNum">
			<radio-group @change="handleVideo">
				<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
					<label class="radio">
						<radio value="1" :checked="selectVideo === '1'" />标清
					</label>
					<text style="font-size: 25rpx;">(3积分)</text>
				</div>
				<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
					<label class="radio">
						<radio value="2" :checked="selectVideo === '2'" />高清
					</label>
					<text style="font-size: 25rpx;">(6积分)</text>
				</div>

				<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
					<label class="radio">
						<radio value="3" :checked="selectVideo === '3'" />全高清
					</label>
					<text style="font-size: 25rpx;">(12积分)</text>
				</div>
			</radio-group>
		</view>



		<!-- 剪辑库设置 start -->
		<view class="timu" style="margin-top: 40rpx;">
			<view class="xuhao">7</view>
			<view class="title">
				剪辑库设置
			</view>
		</view>
    
		<view class="wenan">

			<view class="content">
				<view class="item">
					<view class="left">
						剪辑库名称
					</view>
					<view style="display: flex;justify-content: flex-end; align-items: center;">
						<input :value="shopType+'+'+toDay" style="height: 50rpx;color: #666"></input>
					</view>
				</view>
				<view class="item">
					<view class="left">
						商家所属行业
					</view>
					<view class="right">
						<text>{{shopTrade}}</text>
					</view>
				</view>
			</view>
			<view style="height:150rpx;width: 100%;"></view>
		</view>


		<!-- 音乐设置 end -->
		<view class="BtnList">
			<view class="btn" @click="cancel" style="background-color: white;">保存草稿</view>
			<view class="btn" @click="enter" style="background-color: orange;">确认</view>
		</view>


		<!-- 字体颜色模态框 start -->
		<uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="bottom">
			<view class="radius">
				<view class="header">
					<view>请设置视频字体颜色</view>
					<view style="font-weight: normal;font-size: 48rpx;color: #666" @click="closeVideoFontColor">x</view>
				</view>
				<scroll-view scroll-y="true" style="height: 600rpx;">
					<view class="content">
						<block v-for="item in alifontcolorList" :key="item.id">
							<view class="item" @click="changeFont(item)">
								<image style="height: 50rpx;width: 100%;margin-top: 30rpx;" :src="item.colorImgurl">
								</image>
								<image v-if="item.id == changeFontIndex"
									style="height: 30rpx;width: 30rpx;position: absolute;bottom: 0;right: 0;"
									src="../../static/images/youxiajiaoxuanzhong.png">
								</image>
							</view>
						</block>
					</view>
				</scroll-view>
				<view
					style="margin: 0 auto; width: 100vw; height: 70rpx; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 0rpx;">
					<view @click="enterFont"
						style="border-radius: 30rpx; height: 100%; line-height: 70rpx; background-color: orange; width: 80vw; text-align: center;">
						确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 字体颜色模态框 start -->

	</view>
</template>

<script>
	import debounce from 'lodash/debounce';
	import Http from "@/utils/http"
	const http = new Http()
	const app = getApp()
	export default {
		data() {
			return {
				expose: false,
				shopTrade: '',
				toDay: '',
				shopType: '',
				miaoList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				miaoIndex: 2,
				baseHttp: '',
				shopId: '',
				alifontcolorList: [],
				selectedValue: 'r1',
				selectVideo: '3',
				jiaoben: [],
				checkyi: false,
				minDuration: '1',
				maxDuration: '60',
				videoList: [],
				changeFontIndex: null,
				koubo: false,
				isChoosePeiyin:false,
				peiyinyuanForm:{},
				form: {
					type: '',
					fontSize: 24,
					yinLiang: 10,
					jiaobenId: null,
					videoList: [],
					audioList: [],
					content: '',
					fontColor: '',
					bitrate: 3,
					peiyinyuan:""
				}
			}
		},
		mounted() {
			this.shopId = app.globalData.shopId
			this.baseHttp = app.globalData.baseHttp; // 输出 '我是全局变量'
			uni.$on('jiaoben', (data) => {
				this.jiaoben = data.changeList
				this.form.jiaobenId = data.id
			})
		},
		onShow(option) {
			if (this.form.type != '') {
				http.get('v1/demo/' + this.form.type).then(res => {
					if (res.data.data) {
						uni.showModal({
							title: '温馨提示',
							content: '您有未提交的草稿，是否立即使用?',
							success: (respones) => {
								if (respones.confirm) {
									if (res.data.data.audioList == null) {
										res.data.data.audioList = []
									} else {
										res.data.data.audioList = JSON.parse(res.data.data.audioList);
									}

									if (res.data.data.videoList == null) {
										res.data.data.videoList = []
									} else {
										res.data.data.videoList = JSON.parse(res.data.data.videoList);
									}
									console.log(res.data.data.jiaobenId);
									http.get('v1/jiaoben/getInfo/' + res.data.data.jiaobenId).then(
										res => {
											this.jiaoben = JSON.parse(res.data.data.message);
										})
									this.form = res.data.data
									console.log(this.form);
									console.log(this.form.videoList);
									http.get('v1/demo/delete/' + res.data.data.id).then(res => {
										console.log(res);
									})
								} else if (respones.cancel) {
									http.get('v1/demo/delete/' + res.data.data.id).then(res => {
										console.log(res);
									})
								}
							}
						});
					}
				})
			}
			if (app.globalData.shopId) {
				http.get('v1/system/createShop/' + app.globalData.shopId).then(res => {
					this.shopTrade = res.data.data.trade;
				})
			}
		},
		onLoad(option) {
			uni.$on('videoList', (data) => {
					data.forEach(item => {
						if (!this.form.videoList.some(existingItem => existingItem.id === item.id &&
								existingItem.mediaURL === item.mediaURL)) {
							// 如果不包含，则将当前项添加到 this.form.videoList 中
							this.form.videoList.push(item);
						}
					});
				}),
				console.log('输出了！！！！！！！！！！！！！！！',option.id);
				this.form.type = option.id
			switch (this.form.type) {
				case '1':
					this.shopType = '账号打标签';
					uni.setNavigationBarTitle({
						title: '账号打标签',
					})
					break;
				case '2':
					this.shopType = '人设破流量';
					uni.setNavigationBarTitle({
						title: '人设破流量',
					})
					break;
				case '3':
					this.shopType = '企业硬广告';
					uni.setNavigationBarTitle({
						title: '企业硬广告',
					})
					break;
				case '4':
					this.shopType = '企业做促销';
					break;
				case '5':
					this.shopType = '数字人视频';
					break;
				case '6':
					this.shopType = '视频做爆款';
					break;
				default:
					this.shopType = ''
			}
			// 创建一个 Date 对象
			var today = new Date();

			// 获取月份（注意：getMonth 方法返回的月份是从 0 开始计数的，需要加1）
			var month = today.getMonth() + 1;

			// 获取日期
			var day = today.getDate();

			// 输出月份和日期
			this.toDay = month + "月" + day + "日";
		},

		methods: {
			//前往克隆
			navClone(){
				uni.navigateTo({
					url:'/subpkg/mkvideo/cloneVoice'
				})
			},
			//克隆列表
			navCloneList(){
				uni.navigateTo({
					url:'/subpkg/mkvideo/cloneVoiceList'
				})
			},
			//权限说明介绍
			showpre() {
				uni.showToast({
					title: '暂无说明',
					icon: 'error'
				})
			},
			choosePeiyin(e){
				this.isChoosePeiyin = e.detail.value
			},
			//取消选择
			cancelYard() {
				this.expose = false
			},
			enterYard() {
				this.expose = true
			},
			//确认选中
			enterFont() {
				if (this.form.fontColor) {
					this.$refs.popup.close()
				} else {
					uni.showToast({
						title: '请选择字体',
						icon: 'warning'
					})
				}
			},
			//选中字体
			changeFont(item) {
				console.log(item);
				this.changeFontIndex = item.id;
				this.form.fontColor = item.fontColor;
			},
			//本地音乐
			localhostMusic() {
				uni.showToast({
					title: '正在加工中~',
					icon: 'error'
				})
			},
			//触发口播事件

			onkoubu(e) {
				this.koubo = e.detail.value;
				// this.startRecording();
				// setTimeout(() => {
				// 	this.stopRecording(); // 结束录音
				// }, 6000);
			},

			startRecording() {
			    const options = {
			        duration: 60000,
			        sampleRate: 48000,
			        numberOfChannels: 1,
			        format: 'wav',
			        encodeBitRate: 64000, // 设置为 128kbps
			    };
			
			    const recorderManager = wx.getRecorderManager();
			    recorderManager.start(options);
			},

			stopRecording() {
				const recorderManager = wx.getRecorderManager();

				recorderManager.onStop((res) => {
					const tempFilePath = res.tempFilePath;
					console.log('录音文件路径：', tempFilePath);

					// 将录音文件保存为 WAV 格式
					const fileManager = wx.getFileSystemManager();
					const wavFilePath = `${wx.env.USER_DATA_PATH}/recording.wav`;

					fileManager.copyFile({
						srcPath: tempFilePath,
						destPath: wavFilePath,
						success: function(res) {
							console.log('录音文件已保存为 WAV 格式：', wavFilePath);
							http.upload(wavFilePath).then(res => {
								console.log(res);
								http.upload(wavFilePath).then(res=>{
									console.log(res);
									let url = JSON.parse(res.data).result.name;
									console.log(`https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/${url}`);
									let obj = {
										voiceId:'yin',
										recordUrl:`https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/${url}`,
										audioRecordId:`https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/${url}`,
									}
									http.post('v1/clone/AudioInfo',obj).then(res=>{
										if(res.data.data.body.data.pass == false){
											uni.showToast({
												title:res.data.data.body.data.reason,
												icon:'error'
											})
										}else{
											uni.showToast({
												title:'上传成功，请继续',
												icon:'error'
											})
											self.index = self.index + 1;
											if(self.index >= 20){
												uni.showToast({
													title:'恭喜您录制完毕，请完成提交并耐心等待30分钟',
													icon:'none'
												})
											}
										}
									})
								})
							})
						},
						fail: function(err) {
							console.error('保存为 WAV 格式失败：', err);
						}
					});
				});
				recorderManager.stop(); // 停止录音
			},


			//触发事件
			onSwitchChange(e) {
				this.checkyi = e.detail.value
			},
			//具体场景
			navJbscShangchuan(data, index) {
				if (this.checkyi) {
					data.miaoIndex = this.miaoList[this.miaoIndex];
				}
				let obj = [];
				this.form.videoList.forEach(item => {
					if (item.id == index + 1) {
						obj.push(item);
					}
				})
				data.index = index + 1;
				data.videoList = obj;
				uni.navigateTo({
					url: '/subpkg/mkvideo/jbscshangchuan?obj=' + JSON.stringify(data)
				})
			},
			miaoPickerChange(e) {
				this.miaoIndex = e.detail.value
			},
			handleVideo(value) {
				this.selectVideo = value.detail.value;
				let num = parseInt(value.detail.value);
				console.log(num);
				this.form.bitrate = num;
				console.log(this.form);
			},
			handleRadioChange(value) {
				this.selectedValue = value.detail.value;
			},
			navPeiyinyuan(){
				console.log("====");
				uni.navigateTo({
					url:"/subpkg/mkvideo/peiyinyuan"
				})
			},
			cancel: debounce(function() {
				this.form.shopId = this.shopId;
				if (this.form.videoList.length != 0) {
					this.form.videoList = JSON.stringify(this.form.videoList);
				} else {
					this.form.videoList = null
				}

				if (this.form.audioList.length != 0) {
					this.form.audioList = JSON.stringify(this.form.audioList);
				} else {
					this.form.audioList = null
				}
				http.post('v1/demo', this.form).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
						this.$nextTick(() => {
							uni.switchTab({
								url: '/pages/AiVideo/AiVideo',
							})
						})
					}
				})
			}, 2000),
			enter() {
				let that = this
				var jifen = 0
				if(this.form.bitrate == 1){
					jifen = 3
				}
				if(this.form.bitrate == 2){
					jifen = 6
				}
				if(this.form.bitrate == 3){
					jifen = 12
				}
				uni.showModal({
					cancelText: "取消",
					confirmText: "确认",
					title: "是否提交生成视频,需要扣除"+jifen+"积分",
					success(modelRes) {
						if (modelRes.confirm) {
							uni.showLoading({
								title:"生成中..."
							})
                            console.log("确认了");
							// debounce(()=> {
								http.post('v1/jiaoben/test2', that.form).then(res => {
									uni.hideLoading()
									if (res.data.code == 200) {
										uni.showToast({
											title: '请稍等',
											icon: 'warning'
										});
										let obj = {
											jobId: res.data.data.body.jobId,
											shopId: that.shopId,
										};
										http.post('v1/jiaoben/Job', obj).then(res => {
											uni.navigateTo({
												url: '/subpkg/mkvideo/myJianjiKu'
											});
										});
									} else {
										uni.showToast({
											title: res.data.msg,
											icon: 'none'
										});
									}
								});
							// }, 1000)
						}
						console.log("modelres===>", modelRes);
					}
				})
			},
			//删除视频
			deleteVideo(index) {
				this.form.videoList.splice(index, 1);
			},
			//上传视频
			sendVideo() {
				wx.chooseVideo({
					sourceType: ['album', 'camera'], // 视频选择的来源，包括相册('album')和摄像头('camera')
					compressed: false,
					maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒
					camera: 'back', // 默认拉起的是前置或后置摄像头
					success: (res) => {
						// res.tempFilePath 是选定视频的临时文件路径
						let obj = {
							filePath: res.tempFilePath,
							minDuration: '1',
							maxDuration: '60',
							success: (res) => {
								http.upload(res.tempFilePath).then(res => {
									let a = JSON.parse(res.data);
									let obj = {
										mediaURL: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' +
											a.result.name
									}
									this.form.videoList.push(obj);
								})
							},
							fail: (res) => {
								console.log(res);
							}
						}
						uni.openVideoEditor(obj);
					}
				});
			},
			fontSizeChange(e) {
				this.form.fontSize = e.detail.value
			},
			huifuFontSize(e) {
				this.form.fontSize = 24
			},
			yinliangChange(e) {
				this.form.yinLiang = e.detail.value
			},
			huifuYinliang(e) {
				this.form.yinLiang = 10
			},
			//导航脚本库
			navJiaobenku() {
				uni.navigateTo({
					url: "/subpkg/mkvideo/jiaobenjiaoxue"
				})
			},
			//导航到关键词
			navGuanjianci() {
				uni.navigateTo({
					url: "/subpkg/mkvideo/dingzhibaokuanwenan"
				})
			},
			navDingbuwenan() {
				uni.navigateTo({
					url: "/subpkg/mkvideo/dingbuwenan"
				})
			},
			navMusicSucai() {
				uni.navigateTo({
					url: "/subpkg/mkvideo/musicSucai"
				})
			},
			//开启视频字体颜色
			openVideoFontColor() {
				http.get("v1/alifontcolor/list").then(res => {
					this.alifontcolorList = res.data.data
				})
				this.$refs.popup.open()
			}, 
			//关闭视频字体颜色
			closeVideoFontColor() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f1f1f1;
	}

	.tip {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		height: 80rpx;
		margin: 20rpx 30rpx;
		border-radius: 12rpx;
		background: royalblue;

		.tip-title {
			font-size: 30rpx;
			margin-left: 20rpx;
		}

		.tip-btn {
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border: 1rpx solid #fff;
			width: 130rpx;
			font-size: 28rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
		}
	}

	.timu {
		display: flex;
		align-items: center;
		margin: 30rpx;

		.xuhao {
			height: 42rpx;
			width: 42rpx;
			text-align: center;
			line-height: 42rpx;
			background: #333;
			color: #fff;
			font-size: 24rpx;
		}

		.title {
			color: #333;
			font-size: 36rpx;
			font-weight: 700;
			margin-left: 20rpx;
		}
	}

	.red-tip {
		font-size: 28rpx;
		color: red;
		margin: 0 30rpx 30rpx 30rpx;
	}

	.sing-box {
		margin: 30rpx;
		background: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 12rpx;

		.left {
			font-size: 32rpx;
			font-weight: bold;
		}

		.right {
			color: red;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.jiantou {
				font-size: 48rpx;
				margin-left: 10rpx;
			}
		}
	}

	.RadioNum {
		margin: 30rpx;
		background: #fff;
		padding: 20rpx 30rpx;
		border-radius: 12rpx;

		radio-group {
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}

	.three {
		margin: 30rpx;
		background: #fff;
		padding: 20rpx 30rpx;
		border-radius: 12rpx;
	}

	// 统一素材时长
	.sucaishichang {
		margin: 20rpx 30rpx;
		background: #fff;
		border-radius: 12rpx;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid #f1f1f1;

		}

		.left {
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
		}

		.right {
			display: flex;
			align-items: center;
			color: #666;
			font-size: 30rpx;

			.right-tip {
				font-size: 30rpx;
				color: #666;
			}
		}
	}

	// 统一素材时长
	.sucaishichang {
		margin: 20rpx 30rpx;
		background: #fff;
		border-radius: 12rpx;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid #f1f1f1;

		}

		.left {
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
		}

		.right {
			display: flex;
			align-items: center;
			color: #666;
			font-size: 30rpx;

			.right-tip {
				font-size: 30rpx;
				color: #666;
			}
		}
	}

	// 统一素材时长
	.sucaishichang {
		margin: 20rpx 30rpx;
		background: #fff;
		border-radius: 12rpx;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid #f1f1f1;

		}

		.left {
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
		}

		.right {
			display: flex;
			align-items: center;
			color: #666;
			font-size: 30rpx;

			.right-tip {
				font-size: 30rpx;
				color: #666;
			}
		}
	}

	.xing {
		color: red;
		margin-right: 10rpx;
	}

	.right-icon {
		font-size: 42rpx;
		color: #999;
		margin-left: 10rpx;
	}

	.question {
		height: 40rpx;
		width: 40rpx;
		background: orangered;
		color: #fff;
		border-radius: 20rpx;
		font-size: 22;
		text-align: center;
		line-height: 40rpx;
		margin-right: 10rpx;
	}

	// 视频素材start
	.sucai {
		margin: 30rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;

		.header {
			font-size: 32rpx;
			font-weight: 700;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f1f1f1;
		}

		.beizhu {
			font-size: 26rpx;
			color: #666;
			margin: 30rpx 0 20rpx 0;
		}

		.shuoming {
			font-size: 26rpx;
			color: #666;
			margin: 30rpx 0 20rpx 0;
		}

		.video-upload {
			height: 150rpx;
			width: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #eee;
			border-radius: 10rpx;
		}
	}


	//文案设置
	.wenan {
		margin: 30rpx;
		background: #fff;

		.header {
			display: flex;
			background: rgb(225, 226, 247);
			height: 80rpx;
			align-items: center;

			.header-item {
				flex: 1;
				text-align: center;
				font-size: 32rpx;
			}
		}

		.content {
			padding: 0 30rpx;
			padding-bottom: 20rpx;

			.item {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #f1f1f1;

				.left {
					font-weight: bold;
				}

				.right {
					color: #666;
				}
			}

			.ziti {
				padding-top: 30rpx;

				.yulan {
					height: 150rpx;
					line-height: 150rpx;
					width: 100%;
					text-align: center;
				}

				.slider-box {
					background: #eee;
					border-radius: 12rpx;
					margin: 0 10rpx 10rpx 10rpx;
					padding: 20rpx 0;

					.slider-footer {
						display: flex;
						justify-content: space-around;
						align-items: center;

						.xiao {
							font-size: 28rpx;

						}

						.huifu {
							width: 150rpx;
							height: 50rpx;
							line-height: 50rpx;
							font-size: 28rpx;
							border: 1rpx solid #ccc9ce;
							text-align: center;
							border-radius: 25rpx;
						}

						.da {
							font-size: 28rpx;
						}
					}

				}
			}

		}
	}

	.close {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: #727073;
		color: #fff;
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 25rpx;
		text-align: center;
	}

	.BtnList {
		position: fixed;
		bottom: 0rpx;
		height: 100rpx;
		width: 100vw;
		display: flex;

		.btn {
			margin: 10rpx;
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
		}
	}

	.radius {
		height: 700rpx;
		background: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		overflow: hidden;
		border: 1rpx solid #fff;
		position: relative;


		.header {
			font-size: 36rpx;
			font-weight: bold;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			margin: 0 30rpx;

		}

		.content {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 0rpx 20rpx 30rpx 20rpx;

			.item {
				width: 29%;
				height: 120rpx;
				border: 1rpx solid #eee;
				border-radius: 10rpx;
				display: inline-block;
				margin-bottom: 30rpx;
				position: relative;
			}
		}
	}

	.wenan-type-active {}
</style>